<template>
	<view class="page">
		<view class="class-list">
			<view class="class-item" v-for="item in classList" :key="item.id" @click="handleClassClick(item)">
				<view class="flex align-center justify-between">
					<view class="flex-1">
						<view class="flex align-center justify-between">
							<text class="class-tag" :class="{ 'type-1': item.type === 1, 'type-2': item.type === 2 }">
								{{ item.type === 1 ? '托' : '末' }}
							</text>
							<view class="flex-1">
								<u-text :text="item.className" size="32rpx" color="#333"></u-text>
							</view>
							<view>
								<u-text :text="item.studentCount + '题'" size="32rpx" color="#666"></u-text>
							</view>
						</view>
						<view class="flex align-center margin-top-sm">
							<u-text :text="'班主任：' + item.teacher" size="28rpx" color="#666"></u-text>
							<u-text :text="'讲师：' + (item.subject || '-')" size="28rpx" color="#666"></u-text>
						</view>
					</view>
					<view class="margin-left-sm">
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟数据
const classList = ref([
	{
		id: 1,
		type: 1,//托班
		className: '托管班：一年级（A）班',
		studentCount: 13,
		teacher: '张三',
		subject: '王五',
		schedule: '周三 18:00-20:00'
	},
	{
		id: 2,
		type: 2,//周末班
		className: '周末班：一年级-数学（A）班',
		studentCount: 13,
		teacher: '张三',
		subject: '李四',
		schedule: '周三 18:00-20:00'
	}
]);

// 点击课程项
const handleClassClick = (item) => {
	uni.navigateTo({
		url: `/pages/teacher/createExercise/menu`
	});
};

</script>

<style scoped lang="scss">
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.class-list {
	padding: 20rpx;
}

.class-item {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.class-header {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.class-tag {
	font-size: 20rpx;
	padding: 2rpx 8rpx;
	border-radius: 8rpx;
	margin-right: 12rpx;

	&.type-1 {
		color: #0060E6;
		border: solid 1px #0060E6;
	}

	&.type-2 {
		color: #FFA40C;
		border: solid 1px #FFA40C;
	}
}

.class-name {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.student-count {
	font-size: 28rpx;
	color: #333;
	margin-right: 8rpx;
}

.class-time {
	display: flex;
	align-items: center;
	font-size: 26rpx;
}

.time-label {
	color: #999;
}

.time-value {
	flex: 1;
	color: #666;
}

.detail-btn {
	color: #3c9cff;
	font-size: 26rpx;
}
</style>